<!--#layout name=default-->
<div id="main" class="offset-top" v-cloak>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="page-header">
        <h1 class="title">Transferring</h1>
      </div>
      <div class="note note-info">
        <p>Transferring, you may leave this page</p>
      </div>
      <div class="progress progress-striped active">
        <div
          id="progressBar"
          class="progress-bar progress-bar-info"
          style="width:0%"
          :style="{width:persentText}"
          >{{persentText}}</div
        >
      </div>

      <table class="table">
        <thead>
          <tr>
            <th>Page</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="($data,index) in statusList">
            <td>{{$data.url}}</td>
            <td>
              <i v-if="$data.done" class="fa fa-check icon-state-success"></i>
              <i v-else class="fa fa-spinner fa-spin icon-state-info"></i>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script>
  var self = new Vue({
    el: "#main",
    data: function() {
      return {
        persentText: "",
        statusList: [],
        taskId: Kooboo.getQueryString("TaskId")
      };
    },
    mounted: function() {
      var self = this;
      setInterval(function() {
        Kooboo.Transfer.getStatus({
          id: self.taskId
        }).then(function(res) {
          if (res.success) {
            self.statusList = res.model;

            var total = res.model.length,
              done = _.filter(res.model, function(m) {
                return m.done;
              }).length;

            var persent = (done * 100) / total;
            if (persent !== 100) {
              persent = Math.floor(persent);
            }
            self.persentText = persent + "%";
            if (persent == 100) {
              location.href = Kooboo.Route.Get(Kooboo.Route.Site.ListPage);
            }
          }
        });
      }, 500);
    }
  });
</script>
